<!-- 子组件 -->
<template>
    <div>
        <div style="display: flex;">
            <Input :value="currentValue" type="text" clearable  placeholder="请输入视频链接" />
            <div class="upload ivu-upload" @click="clikcssfd">
                <div class="ivu-upload ivu-upload-select">
                <input ref="input" @change="doUpload"  type="file" class="ivu-upload-input">
                <button type="button" class="ivu-btn ivu-btn-default">
                <i class="ivu-icon ivu-icon-ios-cloud-upload-outline"></i>
                <span>上传</span>
                </button>
                </div>
            </div>
        </div>
        <Progress class="progress_tx" :percent="percentage" status="normal" :text-inside="false" :stroke-width="5"/>
    </div>
</template>
<script>
//ali-oss 依赖自己补
import OSS from 'ali-oss';
export default {
    name:'upload',
    props:{
        currentValue:String
    },
    data(){
        return {
            percentage:0,
            region: 'oss-cn-chengdu',
            bucket:"",
            endpoint:'aliyuncs.com/',
            fileName:'',
            url:'',
            urls:[],
            icon:'ios-cloud-upload-outline',
            disabled:false,
            size:12,
            loading:false,
        }
    },
    methods:{
        clikcssfd(){
            console.log(123)
            this.$refs.input.click();
        },
        doUpload(e){
            console.log(1233)
            const _this = this;
            const urls = [];
            //请求后台的接口 返回 token值等参数
            this.getRequest('/oss/token')
            .then((result) => {
                _this.bucket = result.result.bucketName
                var client = new OSS({
                  region: 'oss-cn-chengdu',
                  accessKeyId: 'LTAI4GDsCPEp4nUoan4GydPq',
                  accessKeySecret: 'bLVGoDCjz60XJSRamr5Sm5isg7pwAE',
                  // stsToken: result.result.securityToken,
                  bucket: 'daifuexecl'
                })
                _this.percentage = 0;
                    // console.log(files.files)
                    const fileLen =  e.target.files
                    console.log(fileLen)
                    let lastName= fileLen[0].name.split('.')[1]
                    let resultUpload = ''
                    const file = fileLen[0]
                    let random_name = this.random_string(6) + '_' + new Date().getTime() + '.' + lastName
                    client.multipartUpload(random_name, file, {
                        progress: function(percentage) {
                        // 上传进度
                            _this.percentage = parseInt(percentage*100)
                        }
                    })
                    .then((results) => {
                    // 上传完成
                        console.log(results)
                        _this.fileName = results.name
                        _this.showFileName = results.name
                        // this.$emit("getFile",_this.fileName)
                        const url = 'http://'+_this.bucket+'.'+_this.region+'.'+ _this.endpoint+ results.name;
                        _this.url = url;
                        // _this.currentValue=url
                        _this.$emit("getFile",_this.url)
                        this.$refs.input.value = null;
                    })
                    .catch(err=>{
                        console.log(err)
                    })
                // }
            })
            .catch(err=>{
                console.log(err)
            })
        },
        random_string(len) { 　　// 随机生成文件名
            len = len || 32; 　　
            var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; 　　
            var maxPos = chars.length; 　　
            var pwd = ''; 　　
            for (let i = 0; i < len; i++) { 　　
                pwd += chars.charAt(Math.floor(Math.random() * maxPos));
            }
            return pwd;
        }
    },
    watch:{
        url(val){
            if(val){
                this.urls.push(val);
            }
        },
        currentValue(val){
            this.$emit("getFile",val)
        }
    }
}
</script>

<style>
</style>
